import React from 'react';
import { View, Text, ImageBackground, TouchableOpacity, StyleSheet, Image } from 'react-native';
import card_header from '@/assets/images/card_header.png'
// import { Image } from '@rneui/base';

const CardComponent = ({
  title,
  timeText,
  content,
  icon,
  leftButtonText = '取消',
  rightButtonText = '确认',
  onLeftPress,
  onRightPress,
}) => {
  return (
    <View style={styles.cardContainer}>
      {/* 头部 - 背景图 + 标题 */}
      <ImageBackground 
        source={card_header} 
        style={styles.header}
        imageStyle={styles.headerImage}
      >
        {/* <Text style={styles.title}>{title}</Text> */}
        <View style={styles.header_box}>
            <Image source={icon} />
            <View style={styles.header_content}>
                <Text style={styles.header_title} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
                <Text>{timeText}</Text>
            </View>
        </View>
      </ImageBackground>

      {/* 内容 - 自定义 */}
      <View style={styles.content}>
        {content}
      </View>

      {/* 底部 - 双按钮 */}
      <View style={styles.footer}>
        <TouchableOpacity 
          style={[styles.button, styles.leftButton]} 
          onPress={onLeftPress}
        >
          <Text style={styles.buttonLeft}>{leftButtonText}</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.button, styles.rightButton, rightButtonText === '删除' ? styles.errorButton : styles.rightButton ]} 
          onPress={onRightPress}
        >
          <Text style={styles.buttonRight}>{rightButtonText}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  cardContainer: {
    borderRadius: 8,
    backgroundColor: '#fff',
    overflow: 'hidden',
    marginBottom: 10,
    elevation: 3,
  },
  header: {
    height: 65,
    justifyContent: 'flex-end',
    padding: 16,
  },
  headerImage: {
    resizeMode: 'cover',
  },
  header_box: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  header_content: {
    flex: 1
  },
  header_title: {
    width: '100%',
    color: '#000',
    fontSize: 16,
    fontWeight: 'bold',
    overflow: 'hidden', 
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    textShadowColor: 'rgba(0,0,0,0.5)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
  },
  content: {
    padding: 16,
  },
  footer: {
    display: 'flex',
    flexDirection: 'row',
    borderTopWidth: 1,
    borderTopColor: '#f0f0f0',
    paddingHorizontal: 12,
    paddingVertical: 10,
    gap: 10,
  },
  button: {
    flex: 1,
    // padding: 12,
    alignItems: 'center',
    borderRadius: 8,
  },
  leftButton: {
    height: 30,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#0059ffff',
    color: '#0059ffff',
  },
  rightButton: {
    height: 30,
    backgroundColor: '#0052d9ff',
    color: '#fff'
  },
  errorButton: {
    height: 30,
    backgroundColor: '#ff4d4f',
    color: '#fff'
  },
  buttonLeft: {
    // fontSize: 16,
    lineHeight: 30,
    // fontWeight: '500',
    color: '#0059ffff',
  },
  buttonRight: {
    // fontSize: 16,
    lineHeight: 30,
    // fontWeight: '500',
    color: '#fff'
  },
});

export default CardComponent;